<template>
  <div class="m-page">
    <van-nav-bar
      class="m-page__bar"
      title="绑定手机"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-cell-group>
      <van-field
        v-model="mobile"
        label="手机号码"
        placeHolder="请输入手机号码"
      />
      <van-field v-model="code" label="验证码" placeHolder="请输入验证码">
        <van-button slot="button" size="small" type="primary"
          >发送验证码</van-button
        >
      </van-field>
    </van-cell-group>
    <div class="g-p--10">
      <van-button type="danger" size="large">确认提交</van-button>
    </div>
  </div>
</template>

<script>
import {
  NavBar,
  Cell,
  CellGroup,
  Panel,
  Field,
  Icon,
  Button,
  Tab,
  Tabs
} from "vant";
export default {
  name: "user_info",
  components: {
    "van-nav-bar": NavBar,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-panel": Panel,
    "van-field": Field,
    "van-icon": Icon,
    "van-button": Button,
    "van-tab": Tab,
    "van-tabs": Tabs
  },
  data() {
    return {
      code: "",
      mobile: ""
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped></style>
